<template>
  <d2-container>
    <div class="row-ac pb-2">
      <div><el-button type="warning" size="small" icon="el-icon-plus" @click="addLottery">添加摇奖</el-button></div>
      <div class="ml-2"><el-button type="danger" size="small" icon="el-icon-delete">批量删除</el-button></div>
    </div>
    <div class="flex-1 ml-2">
      <el-table :data="lotteryList" stripe>
        <el-table-column align="center" label="序号" type="index" width="40" />
        <el-table-column label="摇奖名称" prop="period" width="180" />
        <el-table-column align="center" label="开奖人数" prop="lottery_count" width="80" />
        <el-table-column align="center" label="开奖状态" prop="lottery_status" width="70">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.lottery_status == true" type="success">已开奖</el-tag>
            <el-tag v-else type="danger">未开奖</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="开奖方式" prop="auto_lottery" width="70">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.auto_lottery == true" type="success">自动开奖</el-tag>
            <el-tag v-else type="danger">手动开奖</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="220">
          <template slot-scope="scope">
            <el-button type="primary" v-if="scope.row.lottery_status == true" size="mini">中奖名单</el-button>
            <el-button type="primary" @click="clickPrize(scope.row.id)" size="mini">奖品详情</el-button>
            <el-button type="primary" v-if="scope.row.lottery_status == false" @click="clickAddPrize(scope.row.id)"
              size="mini">添加奖品</el-button>
            <el-button type="primary" v-if="scope.row.lottery_status == false" @click="lotteryEdit(scope.row.id)"
              size="mini">修改</el-button>
            <el-button v-if="scope.row.lottery_status == false" size="mini" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex-1 mt-3">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page.sync="queryInfoLottery.page" layout="total, prev, pager, next" :total="lotteryTotal">
        </el-pagination>
      </div>
    </div>
    <el-dialog :visible.sync="dialogPrizeVisible" width="68%" title="奖品详情">
      <div class="flex-1 mx-2">
        <el-table :data="prizeList" border stripe>
          <el-table-column align="center" label="序号" type="index" width="60" />
          <el-table-column align="center" label="奖项名称" prop="name" />
          <el-table-column align="center" label="奖品图片" prop="product_img">
            <template slot-scope="scope">
              <el-popover placement="right" trigger="hover">
                <el-image slot="reference" style="width: 40px; height: 40px" :src="scope.row.product_img" fit="cover" />
                <el-image style="width: 220px; height: 220px" :src="scope.row.product_img" fit="cover" />
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column align="center" label="奖品名称" prop="product_name" />
          <el-table-column align="center" label="单价" prop="product_price" width="70" />
          <el-table-column align="center" label="奖品数量" prop="people_num" width="80" />
          <el-table-column align="center" label="摇奖期数" prop="lottery_name" />
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="prizeEdit(scope.row.id)">修改</el-button>
              <el-button size="mini" type="danger">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogLotteryVisible" width="42%" title="添加/编辑摇奖">
      <el-form :model="formLottery" ref="form" label-width="80px">
        <el-form-item label="摇奖期数" prop="period">
          <div style="width: 60%;">
            <el-input v-model="formLottery.period"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="自动开奖" prop="auto_lottery">
          <el-switch v-model="formLottery.auto_lottery"></el-switch>
        </el-form-item>
        <el-form-item label="开奖人数" prop="lottery_count">
          <el-input-number v-model="formLottery.lottery_count" :min="1"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="clickCancel">取 消</el-button>
        <el-button type="primary" v-if="!dialogLotteryEdit" @click="submitLotteryForm">修 改</el-button>
        <el-button type="primary" v-if="dialogLotteryEdit" @click="handleLotteryEdit">保 存</el-button>
      </div>
    </el-dialog>
  </d2-container>
</template>

<script>
  import {
    lotterylDeleteUrl,
    lotterylUpdateUrl,
    lotterylCreateUrl,
    lotterylDetailUrl,
    lotterylListUrl,
    prizeUrl
  } from "@/utils/promotion"
  export default {
    data() {
      return {
        queryInfoLottery: {
          page: 1,
          pageSize: 10
        },
        lotteryList: [],
        lotteryTotal: 0,
        dialogPrizeVisible: false,
        prizeList: [],
        dialogLotteryVisible: false,
        dialogLotteryEdit: true,
        formLottery: {
          period: '',
          lottery_status: false,
          auto_lottery: true,
          lottery_count: 1,
        },
        getLotteryId: ''
      }
    },
    created() {
      this.initData()
    },
    methods: {
      initData() {
        this.getLotteryList()
      },
      getLotteryList() {
        this.$get(lotterylListUrl, this.queryInfoLottery).then(res => {
          this.lotteryList = res.data.data.list
          this.lotteryTotal = res.data.data.total
        })
      },
      // 分页页码显示条数
      handleSizeChange(newSize) {
        // 把每页显示多少数据重新赋值
        this.queryInfoLottery.pageSize = newSize
        this.getLotteryList()
      },
      // 翻页事件
      handleCurrentChange(newPage) {
        this.queryInfoLottery.page = newPage
        this.getLotteryList()
      },
      clickPrize(lotteryId) {
        this.dialogPrizeVisible = true
        this.$get(prizeUrl + '?lottery_id=' + lotteryId).then(res => {
          this.prizeList = res.data.data.list
          this.treeTotal = res.data.data.total
        })
      },
      addLottery() {
        this.dialogLotteryVisible = true
        this.dialogLotteryEdit = true
      },
      handleLotteryEdit() {
        this.$post(lotterylCreateUrl, this.formLottery).then(res => {
          if (res.data.code == 200) {
            this.dialogLotteryVisible = false
            this.$message({
              message: '添加成功',
              type: 'success'
            });
            this.formLottery = {}
            this.getLotteryList()
          }
        })
      },
      clickCancel() {
        this.dialogLotteryVisible = false
        this.formLottery = {}
      },
      lotteryEdit(lotteryId) {
        this.dialogLotteryVisible = true
        this.dialogLotteryEdit = false
        this.getLotteryId = lotteryId
        this.$get(lotterylDetailUrl + lotteryId + '/').then(res => {
          if (res.data.code == 200) {
            this.formLottery = {
              period: res.data.data.period,
              lottery_status: res.data.data.lottery_status,
              auto_lottery: res.data.data.auto_lottery,
              lottery_count: res.data.data.lottery_count
            }
          }
        })
      },
      submitLotteryForm() {
        this.$put(lotterylUpdateUrl + this.getLotteryId + '/', this.formLottery).then(res => {
          if (res.data.code == 200) {
            this.dialogLotteryVisible = false
            this.$message({
              message: '修改成功',
              type: 'success'
            });
            this.formLottery = {}
            this.getLotteryList()
          }
        })
      },
      clickAddPrize(lotteryId) {
        this.$router.push({
          path: '/lottery/prizeinfo',
          query: {
            lotteryId: lotteryId // 添加第二个参数
          }
        });
      }
    }
  }
</script>

<style>
</style>